<template>
  <!-- 侧边栏 -->
  <el-aside :width="store.isCollapse ? '180px' : '64px' " style="height: 100vh;">
    <el-scrollbar>
      <el-menu
          router
          class="el-menu-vertical-demo"
          default-active="3"
          active-text-color="#ffd04b"
          background-color="#253d53"
          text-color="#fff"
          :collapse="!store.isCollapse"
          :collapse-transition="false"
      >
        <div style="height: 60px;line-height: 60px;text-align: center">
          <div style="cursor: pointer">
            <img src="https://s1.ax1x.com/2022/11/19/zKJyxH.png"
                 style="width: 35px;position: relative;top: 9px;margin-right: 5px">
            <span style="color: #fff" v-show="store.isCollapse">后台管理系统</span>
          </div>
        </div>
        <!-- 一级菜单 -->
        <el-menu-item v-for="item in noChildren()" :key="item.path" :index="item.path">
          <el-icon>
            <component class="icons" :is="item.icon"/>
          </el-icon>
          <template #title>
            {{ item.label }}
          </template>
        </el-menu-item>

        <!-- 多级菜单 -->
        <el-sub-menu v-for="item in hasChildren()" :key="item.path" :index="item.path">
          <template #title>
            <el-icon>
              <component class="icons" :is="item.icon"/>
            </el-icon>
            <span>
            {{ item.label }}
            </span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
            <el-icon>
              <component class="icons" :is="child.icon"/>
            </el-icon>
            {{ child.label }}
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
import {useIsCollapseStore} from "../../store/useCollapseStore.js";

const store = useIsCollapseStore()

//菜单集合
const menuList = [
  {
    path: '/home',
    name: 'home',
    label: '首页',
    icon: 'House',
    url: 'Home/Home'
  },
  {
    path: '/region',
    name: 'region',
    label: '地区管理',
    icon: 'Place',
    url: 'RegionManage/RegionManage'
  },
  {
    path: '/system',
    label: '系统管理',
    icon: 'Setting',
    children: [
      {
        path: '/user',
        name: 'user',
        label: '用户管理',
        icon: 'User',
        url: 'System/UserManage'
      },
      {
        path: '/role',
        name: 'role',
        label: '角色管理',
        icon: 'UserFilled',
        url: 'System/RoleManage'
      }
    ]
  },
  {
    path: '/graduate',
    label: '考研管理',
    icon: 'Position',
    children: [
      {
        path: '/university',
        name: 'university',
        label: '院校管理',
        icon: 'School',
        url: 'graduate/UniversityManage'
      },
      {
        path: '/major',
        name: 'major',
        label: '专业管理',
        icon: 'Wallet',
        url: 'graduate/MajorManage'
      },
      {
        path: '/department',
        name: 'department',
        label: '学科管理',
        icon: 'TakeawayBox',
        url: 'Postgraduate/DepartmentManage'
      }
    ]
  }
]

//判断没有二级菜单
const noChildren = () => {
  return menuList.filter(v => !v.children)
}
//判断有二级菜单
const hasChildren = () => {
  return menuList.filter(v => v.children)
}
</script>

<style>
.el-menu {
  border-right: none;
}
</style>
